<template>
  <div>
    <div :ref="refs" style="width: 100%; height: 100px;"></div>
    <div style="text-align: center;color: rgba(79, 166, 247, 1);margin-top: 5px">{{msg}}</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill';
 import {defineProps} from 'vue';
export default {
  props: {
    msg: String,
    refs:String,
    formatter:String,
    data:Array,
    gradientColor:Array
  },
  data() {
    return {
      waterChart: null,
    };
  },
  mounted() {
   console.log('222222222222222222',this.msg)
    this.initWaterChart();
  },
  methods: {
    initWaterChart() {
      this.waterChart = echarts.init(this.$refs[[this.refs]]);
      // const gradientColor = [
      //   {
      //     offset: 0,           // 0% 处的颜色
      //     color: 'rgba(0, 191, 255, 1)'  // 起始颜色
      //   },
      //   {
      //     offset: 1,           // 100% 处的颜色
      //     color: 'rgba(0, 0, 128, 1)'  // 结束颜色
      //   }
      // ];


      const option = {
        series: [
          {
            type: 'liquidFill', //水位图
            radius: '80%', //显示比例
            center: ['50%', '50%'], //中心点
            amplitude:5, //水波振幅
            data: this.data, // data个数代表波浪数
            // color: ['#23cc72'], //波浪颜色
            backgroundStyle: {
              borderWidth: 1, //外边框
              borderColor: 'rgba(7, 45, 113, 1)', //边框颜色
              color: 'rgba(7, 45, 113, 1)', //边框内部填充部分颜色
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: this.gradientColor  // 使用自定义渐变色
              }
            },
            label: {
              //标签设置
              normal: {
                position: ['50%', '50%'],
                formatter: this.formatter, //显示文本,
                textStyle: {
                  fontSize: '14px', //文本字号,
                  color: '#ffffff',
                },
              },
            },
            outline: {
              show: false,//最外层边框显示控制
            },
          },
        ],
      };


      this.waterChart.setOption(option);
    },
  },
};
</script>
